"use client";

import Image from "next/image";
import type { VideoItem } from "@/app/types/video";

interface Props {
  loading?: boolean;
  videos: VideoItem[];
  onEdit: (video: VideoItem) => void;
  onDelete: (video: VideoItem) => void;
}

function formatDuration(seconds: number) {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = seconds % 60;
  if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
  return `${m}:${String(s).padStart(2, "0")}`;
}

export default function VideoTable({ loading, videos, onEdit, onDelete }: Props) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full table-auto text-left text-sm">
        <thead>
          <tr className="border-b border-zinc-200 text-zinc-500 dark:border-zinc-800 dark:text-zinc-400">
            <th className="px-2 py-2">封面</th>
            <th className="px-2 py-2">标题</th>
            <th className="px-2 py-2">分类</th>
            <th className="px-2 py-2">时长</th>
            <th className="px-2 py-2">来源</th>
            <th className="px-2 py-2">操作</th>
          </tr>
        </thead>
        <tbody>
          {videos.map((v) => (
            <tr key={v.id} className="border-b border-zinc-100 hover:bg-zinc-50 dark:border-zinc-900 dark:hover:bg-zinc-900">
              <td className="px-2 py-2">
                {v.coverUrl ? (
                  <div className="relative h-12 w-20 overflow-hidden rounded bg-zinc-100 dark:bg-zinc-900">
                    <Image src={v.coverUrl} alt={v.title} fill sizes="80px" className="object-cover" />
                  </div>
                ) : (
                  <div className="h-12 w-20 rounded bg-zinc-100 text-center leading-[3rem] text-zinc-400 dark:bg-zinc-900">
                    无
                  </div>
                )}
              </td>
              <td className="px-2 py-2">
                <div className="max-w-[20rem] truncate" title={v.title}>{v.title}</div>
              </td>
              <td className="px-2 py-2">{v.category}</td>
              <td className="px-2 py-2">{formatDuration(v.durationSeconds || 0)}</td>
              <td className="px-2 py-2">
                <a
                  href={v.sourceUrl}
                  target="_blank"
                  className="text-zinc-900 underline-offset-2 hover:underline dark:text-zinc-100"
                >
                  打开
                </a>
              </td>
              <td className="px-2 py-2">
                <div className="flex gap-2">
                  <button
                    className="rounded border border-zinc-300 px-2 py-1 hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-900"
                    onClick={() => onEdit(v)}
                  >
                    编辑
                  </button>
                  <button
                    className="rounded border border-red-300 px-2 py-1 text-red-600 hover:bg-red-50 dark:border-red-700 dark:hover:bg-red-950"
                    onClick={() => onDelete(v)}
                  >
                    删除
                  </button>
                </div>
              </td>
            </tr>
          ))}

          {videos.length === 0 && !loading && (
            <tr>
              <td colSpan={6} className="px-2 py-8 text-center text-zinc-500 dark:text-zinc-400">
                暂无数据
              </td>
            </tr>
          )}
        </tbody>
      </table>
      {loading && (
        <div className="py-4 text-center text-zinc-500 dark:text-zinc-400">加载中...</div>
      )}
    </div>
  );
}


